<template>
  <div id="views">
    <section class="sec1">
      <p>请选择充值金额(元)</p>
      <div>
        <button :class="selectIndex == index ? 'selected' :''" @click="selectMoney(item.value , index)"
                v-for="(item,index) in moneyArr">
          ￥{{item.text}}
        </button>
      </div>
    </section>
    <section class="sec2">
      <p>输入充值金额(元)</p>
      <div class="div1">
        <input type="number" class="width100 inputMoney" placeholder="请输入充值金额" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" v-model="inputMoney">
      </div>
      <p class="way">充值方式</p>
      <div class="rechargeWay">
        <label :for="item.id" class="hoverhand" v-for="(item, index ) in paysChannels">
          <input type="radio" name="way" :value="item.value" v-model="payType" :id="item.id" :checked="item.checked">
          <img :src="item.img" :alt="item.text">
          <span class="text flexStyle">{{item.text}}</span>
          <span class="checkstyle"></span>
        </label>
      </div>
    </section>
    <div class="renminder">
      <p class="title">提示</p>
      <div>
        1.只支持储蓄卡充值，现金钱包可用于直接支付算力订单 ;<br>
        2.购买35万以上IPFS独享矿机，请选择：专项充值（35万以上IPFS独享矿机）;
      </div>
    </div>
    <button class="yellowbtn" @click="recharge">立即充值</button>
    <div class="toastInfo">
<!--      <p>如需客服人员代充值,请添加微信号：</p>-->
<!--      <p>13908200769</p>-->
    </div>
    <dia-log ref="dl" v-bind:msg="safeInfo" @confirm="sure()" @cancel="cancel()"></dia-log>
    <dia-log-five ref="dialogFive" curtitle="您已有一笔对公充值未确认请先完成充值" confirmBtn="继续完成充值" @confirm="continueRecharge()"/>
    <recharge-inverify ref="RechargeInverify" @confirm="rechargeNew()"/>
  </div>
</template>
<script>
  import {ifNeedRechargeVerfy, payChannels ,yinlianUrl , yinlianRecharge , getPublicMes} from '../../http/api';

  export default {
    name: 'recharge',
    components: {
      DiaLog: resolve => {require(['../../components/dialog'], resolve)},
      DiaLogFive: resolve => {require(['../../components/dialogFive'], resolve)},
      RechargeInverify: resolve => {require(['../../components/rechargeInverify'], resolve)},
    },
    data() {
      return {
        introduce: '充值',
        windowAnimate: 'slide',
        safeInfo: '为保障您的账户安全，充值之前请先进行实名校验',//实名安全提示文字
        moneyArr: [/*按钮金额选择类型*/
          {value: 3000, text: '3,000'}, {value: 6000, text: '6,000'},
          {value: 9000, text: '9,000'}, {value: 12000, text: '12,000'},
        ],
        payChannelsImgs: {   //提前加载所有支付渠道的图片(支付方式排序根据这个) 返回支付方式不存在在此，就删除
          BANK_TRANSFER : require('../../common/imgs/publicrechage.png'),//对公转账
          UNION_WAP: require('../../common/imgs/yinlianrechage.png'),//银联
          YSF_WAP : require('../../common/imgs/yinlianrechage.png'),//银联( 老主体 )
          OTC_USDT : require('../../common/imgs/otc.png'),//otc
          IPFS_TRANSFER : require('../../common/imgs/specialRechargeIcon.png'),//大金额专项充值
        },
        paysChannels: [],//支付渠道
        selectIndex: 0,//快速选择支付金额的index
        selectedMoney: 3000,/*按钮选择的金额*/
        inputMoney: 3000,/*输入框的金额*/
        minMoney: 100,/*最低充值金额*/
        payType: 'BANK_TRANSFER',/*支付方式*/
        verFyCode: 1, //是否充值校验的类型 // 1已实名 ， 3新手未下单，弹窗提示实名(不用必须去实名)   2未实名（必须实名）
        order_id: '',//订单id
        ajaxData : {},//暂时存放的data
      }
    },
    mounted() {
      let thiz = this;
      let Not = {noToast: true, noLoading: true};
      let https = [
        ifNeedRechargeVerfy(Not).then(res => {
          //判断是否需要实名
          if (res.code == 200) {
            thiz.verFyCode = res.data;
          } else {
            thiz.verFyCode = 2
          }
        }),
        payChannels(Not).then(res => {
          //获取支付渠道，并重新组装和排序
          if (res.code == 200) {
            let channels = res.data.channels;//支持支付方式
            for (let i = channels.length - 1; i >= 0; i--) {
              let curImg = thiz.payChannelsImgs[channels[i]];
              if( !curImg ){
                channels = thiz.arrRemove(channels , i);
              }else{
                channels[i] = {
                  img: thiz.payChannelsImgs[channels[i]],
                  value: channels[i]
                };
                switch (channels[i].value) {
                  case 'BANK_TRANSFER':
                    channels[i].text = '对公转账';
                    channels[i].id = 'public';//id设置某些css特定样式
                    break;
                  case 'IPFS_TRANSFER':
                    channels[i].text = '专项充值';
                    channels[i].id = 'special';//id设置某些css特定样式
                    break;
                  case 'UNION_WAP':
                    channels[i].text = '银联支付';
                    channels[i].id = 'yinlian';//id设置某些css特定样式
                    break;
                  case 'YSF_WAP':
                    channels[i].text = '银联支付';
                    channels[i].id = 'yinlian';//id设置某些css特定样式
                    break;
                  case 'OTC_USDT':
                    channels[i].text = 'OTC代充';
                    channels[i].id = 'otc';//id设置某些css特定样式
                    break;
                }
              }
            }
            let order = Object.keys(thiz.payChannelsImgs);
            channels.sort(function (a, b) {  //根据order来排序channels
              return order.indexOf(a.value) - order.indexOf(b.value);
            });
            thiz.paysChannels = channels;
            thiz.payType = channels[0].value;
          }
        })
      ];
      this.loading();
      Promise.all(https).then(res => {
        this.closeLoading();
      })
    },
    watch: {
      inputMoney(){
        let my = this.inputMoney;
        this.inputMoney = my.replace(/^(0+)|[^\d]+/g,'');
      },
      // verFyCode(val, oldVal) {
      //   if (val != 1) {
      //     this.showVerify();
      //   }
      // }
    },
    methods: {
      showVerify() {
        //显示校验弹窗，递归调用，防止组件未加载
        let thiz = this;
        if (thiz.$refs.dl) {
          thiz.$refs.dl.dialogShow();
        } else {
          thiz.timeout(function () {
            thiz.showVerify();
          }, 50)
        }
      },
      sure() {
        //校验弹窗点击确定
        if (this.verFyCode === 2) {
          this.$router.push({path: '/chose_foreign', query: {rechargeVerify: true}});
          this.canScroll();
        }
      },
      cancel() {
        if (this.verFyCode === 2) {
          this.$router.replace({path: '/entrance'})
        }
        this.canScroll();
      },
      selectMoney(item, index) {
        /*点击按钮选择金额*/
        this.selectedMoney = item;
        this.selectIndex = index;
        this.inputMoney = item;
      },
      inputchange() {
        /*输入金额*/
        if (this.inputMoney < this.minMoney) {
          this.inputMoney = this.minMoney;
        }
      },
      recharge() {
        /*提交*/
        let thiz = this;
        if (this.verFyCode == 2) {
          this.showVerify();//显示实名弹窗
          return;
        }
        if (!this.inputMoney) {
          let toast = require('../../common/js/toast').toast;
          toast('请输入金额');
          return;
        }
        function openYinlian() {
          yinlianRecharge({amount:thiz.inputMoney}).then(res=>{
            if( res.code ==200){
              let url = res.data.url;
              if( thiz.payType === 'UNION_WAP'){
                let div = document.createElement('div');
                div.setAttribute('style','height:0;width:0;overflow:hidden;');
                div.innerHTML = url;
                document.body.appendChild(div);
                document.getElementById('pay_form').submit();
              }else {
                window.location.href = url ;
              }
            }
          });
        }
        switch (thiz.payType) {
          case 'BANK_TRANSFER': //对公转账
            thiz.isRechargePublic();
            // thiz.$router.push({path: 'recharge_public', query: {money: this.inputMoney}});
            break;
          case 'IPFS_TRANSFER' : //专项充值
            thiz.isRechargePublic();
            // thiz.$router.push({path: 'recharge_public', query: {money: this.inputMoney}});
            break;
          case 'UNION_WAP': //银联
            openYinlian();
            break;
          case 'YSF_WAP': //银联
            openYinlian();
            break;
        }
      },
      rechargeNew(){
        //发起新的充值
        // console.log('ssssssss')
        let thiz = this;
        this.$router.push({path: '/recharge_public', query: { money: thiz.inputMoney , is_new : 1 , channel : thiz.payType}});
      },
      isRechargePublic(){
        let thiz = this;
        // this.$refs.RechargeInverify.dialogShow();return;
        getPublicMes({noToast : true ,  amount : thiz.inputMoney , channel : thiz.payType  }).then(res => {
          let code = res.code;
          if(code == 680){
            //您已有一笔对公充值未确认，请先完成充值
            thiz.$refs.dialogFive.dialogShow();
            let data = res.data.data;
            thiz.ajaxData = data;
          }
          if(code == 681){
            //681:您已有一笔对公充值正在审核中，请耐心等待   可以发起新的充值
            this.$refs.RechargeInverify.dialogShow();
            // thiz.$router.push({path: 'recharge_public', query: {money: this.inputMoney , is_new : 1 }});
          }
          if(code == 200){
            let data = res.data.data;
            thiz.$router.push({path: '/recharge_public', query: {money: data.total_fee , channel : thiz.payType}});
          }
        });
      },
      continueRecharge(){
        let data = this.ajaxData,
          thiz = this;
        thiz.$router.push(
          {
            path: '/recharge_public',
            query: {money : data.total_fee ,order_id : data.order_id, is_continue : 1  , channel : thiz.payType, data : JSON.stringify(data)}
          });
      },
    },
  }
</script>
<style lang="less" type="text/less" scoped>
  #views {
    padding: 0 0.3rem;
    padding-top: 0.43rem;
    text-align: left;
  }
  .renminder{
    padding: 0.2rem 0;
    >.title{
      font-size: 0.28rem;color: #656363;padding: 0.2rem 0;
    }
    >div{
      font-size: 0.24rem;color: #989898;line-height: 165%;padding-top: 0;
    }
  }
  .sec1 {
    background: #fff;
    border-radius: 0.04rem;
    padding: 0 0.24rem;

    > p {
      padding: 0.32rem 0;
      font-size: 0.32rem;
    }

    > div {
      padding-bottom: 0.38rem;

      button {
        width: calc(25% - 0.39rem / 4);
        box-sizing: border-box;
        margin-left: 0.13rem;
        background: #E5E5E5;
        color: #898989;
        font-size: 0.26rem;
        line-height: 100%;
        height: 0.7rem;
      }

      button:first-child {
        margin-left: 0;
      }

      .selected {
        background: #fef6da;
        border: 0.02rem solid #fae07c;
        color: #262626;
      }
    }
  }

  .sec2 {
    background: #fff;
    border-radius: 0.04rem;
    padding: 0 0.24rem;
    margin-top: 0.2rem;
    padding-bottom: 0.2rem;

    > p {
      padding: 0.32rem 0;
      font-size: 0.32rem;
      padding-bottom: 0;
    }

    .inputMoney {
      font-size: 0.36rem;
      height: 0.95rem;
      margin-top: 0.1rem
    }

    .inputMoney::-webkit-input-placeholder {
      color: #AFB2B8;
      font-size: 0.36rem;
      font-family: 'PingFang-SC-Regular', 'PingFang-SC-Medium,微软雅黑', Helvetica, Arial, sans-serif;
    }

    .inputMoney::-moz-placeholder {
      color: #AFB2B8;
      font-size: 0.36rem;
      font-family: 'PingFang-SC-Regular', 'PingFang-SC-Medium,微软雅黑', Helvetica, Arial, sans-serif;
    }

    .inputMoney:-ms-input-placeholder {
      color: #AFB2B8;
      font-size: 0.36rem;
      font-family: 'PingFang-SC-Regular', 'PingFang-SC-Medium,微软雅黑', Helvetica, Arial, sans-serif;
    }

    > .div1 {
      border-bottom: 0.01rem solid rgba(223, 223, 223, 0.8);
      padding-bottom: 0.02rem
    }

    > .way {
      padding: 0.49rem 0;padding-bottom: 0.2rem;
    }

    .rechargeWay {
      input {
        width: 0;
        height: 0;
        border: 0;
        opacity: 0;
        float: left
      }

      label {
        font-size: 0.28rem;
        overflow: hidden;
        display: block;
        padding: 0.21rem 0;
        position: relative;

        img {
          width: 0.29rem;
          height: 0.29rem;
          position: absolute;
          z-index: 1;
          left: 0;
          top: 50%;
          margin-top: -0.145rem;
        }

        > .text {
          float: left;
          height: 0.37rem;
          display: inline-block;
          padding-left: 0.4rem;
          line-height: normal;
        }

        .checkstyle {
          width: 0.37rem;
          height: 0.37rem;
          float: right;
          display: inline-block;
          border-radius: 50%;
          background: url("../../common/imgs/radioborder.png") center center no-repeat;
          background-size: 100% 100%;
        }
      }

      input:checked ~ .checkstyle {
        background: url("../../common/imgs/radiochecked.png") center center no-repeat;
        background-size: 100% 100%;
      }
    }
  }

  .toastInfo {
    text-align: center;
    padding-bottom: 1rem;

    > p:first-child {
      padding-top: 0.4rem;
      color: #7F8286;
      font-size: 0.28rem;
    }

    > p:last-child {
      font-size: 0.34rem;
      padding-top: 0.32rem;
    }
  }


</style>
